<template>
    <div>
      <now-showing></now-showing>
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="我是有底线的"
          :immediate-check="false"
          @load="onLoad">
            <van-cell v-for="item in datalist" :key="item.filmId" @click="handleChangePage(item.filmId)">
                <div class="boxbig">
                    <img :src="item.poster" alt="" class="imgbig"/>
                    <div class="data">
                        <div class="title">{{item.name}}</div>
                        <div :class="item.grade?'':'hidden'">观众评分：<span class="color">{{item.grade}}</span></div>
                        <div class="actors">主演：{{item.actors | filmfilter}}</div>
                        <div>{{item.nation}} | {{item.runtime}}分钟</div>
                    </div>
                    <div class="maipiao">
                        <button>预购</button>
                    </div>
                </div>
            </van-cell>
        </van-list>
    </div>
</template>
<script>
import http from '@/util/http'
import Vue from 'vue'
Vue.filter('filmfilter', (data) => {
//   console.log(data.map(item => item.name))
  return data.map(item => item.name).join(' ')
})
export default {
  data () {
    return {
      datalist: [],
      loading: false,
      finished: false,
      current: 1,
      total: 0
    }
  },
  mounted () {
    http({
      url: `gateway?cityId=${this.$store.state.cityId}&pageNum=1&pageSize=10&type=2&k=6907517`,
      headers: {
        'X-Host': 'mall.film-ticket.film.list'
      }
    }).then(res => {
      console.log(res.data.data)

      this.datalist = res.data.data.films
      this.total = res.data.data.total
    })
  },
  methods: {

    onLoad () {
      // 防止触发太早
      console.log(this.total, this.datalist.length)
      if (this.datalist.length === this.total && this.total !== 0) {
        this.finished = true
        return
      }
      this.current++

      http({
        url: `/gateway?cityId=${this.$store.state.cityId}&pageNum=${this.current}&pageSize=10&type=2&k=6067450`,
        headers: {
          'X-Host': 'mall.film-ticket.film.list'
        }
      }).then(res => {
        this.datalist = [...this.datalist, ...res.data.data.films]
        this.loading = false
      })
    },
    handleChangePage (id) {
      this.$router.push(`/detail/${id}`)
    }
  }
}
</script>
<style lang="scss" scoped>
// van-list van-cell{
//     width:46.875rem;
// }

.imgbig{
    width:8.25rem;
    height: 11.75rem;
}
.boxbig{
    width:45rem;

    height: 15.5rem;
    display: flex;
    align-items: center;
    // border: 1px solid red;
    padding: 0 .2188rem;

}
.data{
    width:25.625rem;
    padding: 0rem 1.25rem;
    height: 11.75rem;
    font-size: 1.625rem;
    // border: 1px solid red;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    color:gray;
    .actors{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .hidden{
        visibility: hidden;
    }
}
.title{
    font-size: 2rem;
    color: #000;

}

.color{
    color:#ffb232;
    font-size: 2.125rem;
}
.maipiao{
    width:6.25rem;
    button{
        width:100%;
        height: 3.125rem;
        color: #ff5f16;
        border: 1px solid #ff5f16;
        top: -50%;
        right: -50%;
        bottom: -50%;
        left: -50%;
        border-radius: .125rem;
        font-size: 2rem;
    }
}
</style>
